<template>
   <div>
      <h2>每日访客人数统计</h2>
      <div id="charttwo" class="two">

      </div>
   </div>
</template>

<script setup>
import { inject, onMounted, reactive } from "vue";
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
let $echarts = inject("echarts")



onMounted(() => {
   let myChart = $echarts.init(document.getElementById("charttwo"))
   Link(apiurl.chartDataTwo).then((ok) => {
      console.log(ok);

      myChart.setOption({
         xAxis: {
            type: "category",
            data: ok.data.day,
            boundaryGap:false,
            axisLine:{
                    lineStyle:{
                        color:"#000000"
                    }
                }
         },
         tooltip:{

         },
         yAxis: {
            type: "value",
            axisLine:{
                    lineStyle:{
                        color:"#000001"
                    }
                }
            

         },
         grid:{
            left:"1%",
            right:"4%",
            botton:"1%",
            top:"6%",
            containLabel:true
         },
         series: [
            {
               type: "line",
               name: "外卖和快递",
               data:ok.data.num.外卖和快递,
               // stack:"Total",
               // smooth:true,
               // areaStyle:{
               //    opacity:0.8,
               //    color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
               //                  {
               //                      offset: 0,
               //                      color: "rgb(128,255,165)"

               //                  },
               //                  {
               //                      offset: 1,
               //                      color: "rgb(1,191,236)"

               //                  }
               //              ])
               // },
               lineStyle:{
                  width:3
               }
            },
            {
               type: "line",
               name: "一般访客",
               data:ok.data.num.一般访客,
               // stack:"Total",
               // smooth:true,
               // areaStyle:{
               //    opacity:0.8,
               //    color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
               //                  {
               //                      offset: 0,
               //                      color: "rgb(55,162,255)"

               //                  },
               //                  {
               //                      offset: 1,
               //                      color: "rgb(116,21,198)"

               //                  }
               //              ])
               // },
               lineStyle:{
                  width:3
               }
            },
            {
               type: "line",
               name: "授权访客",
               data:ok.data.num.授权访客,
               // stack:"Total",
               // smooth:true,
               // areaStyle:{
               //    opacity:0.8,
               //    color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
               //                  {
               //                      offset: 0,
               //                      color: "rgb(255,0,134)"

               //                  },
               //                  {
               //                      offset: 1,
               //                      color: "rgb(135,0,157)"

               //                  }
               //              ])
               // },
               lineStyle:{
                  width:3
               }
            }

         ]
      })

   })

})
</script>

<style lang='scss' scoped>
h2 {
   height: 0.4rem;
   color: #000000;
   line-height: 0.2rem;
   text-align: center;
   font-size: 0.4rem;
}

.two {
   height: 4.5rem;
}
</style>